<template>
  <el-dialog
    :visible.sync="isShow"
    width="75%"
    center
    title="操作日志"
    v-el-drag-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @open="onOpen"
    @close="onClose"
  >
    <el-table :data="tableData" style="max-height: 60vh; min-height: 484px;">
      <el-table-column
        label="序号"
        width="60"
        type="index"
        :index="(index) => index + 1 + (this.paging.page - 1) * this.paging.size"
      ></el-table-column>

      <el-table-column prop="TransTime" show-overflow-tooltip label="操作时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.TransTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="Command" show-overflow-tooltip label="操作内容"></el-table-column>
      <el-table-column prop="HasReplay" show-overflow-tooltip width="100" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.HasReplay === 1 ? '已返回' : '未返回' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ReplayCode" show-overflow-tooltip width="100" label="结果">
        <template slot-scope="scope">
          <i
            v-if="scope.row.HasReplay === 1 && scope.row.ReplayCode === 0"
            class="el-icon-success color-success"
          ></i>
          <i
            v-else-if="scope.row.HasReplay === 1 && scope.row.ReplayCode === 1"
            class="el-icon-error color-danger"
          ></i>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="ReplayResult" show-overflow-tooltip width="100" label="详细内容">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.HasReplay === 1 && scope.row.ReplayResult"
            placement="bottom"
            title="详细内容"
            width="700"
            trigger="hover"
          >
            <el-link slot="reference">查看</el-link>
            <p class="table-hover-content">{{ scope.row.ReplayResult }}</p>
          </el-popover>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="ReplayTime" show-overflow-tooltip label="回答时间">
        <template slot-scope="scope">
          <span>{{ scope.row.ReplayTime > 0 ? parseTime(scope.row.ReplayTime) : '-' }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="ExecuteTime" show-overflow-tooltip label="执行时间">
        <template slot-scope="scope">
          <span>{{ scope.row.ExecuteTime > 0 ? parseTime(scope.row.ExecuteTime) : '-' }}</span>
        </template>
      </el-table-column> -->
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paging.page"
      :page-size="paging.size"
      background
      layout="total, prev, pager, sizes, next, jumper"
      :total="paging.total"
    ></el-pagination>
    <div style="padding-top: 10px"></div>
  </el-dialog>
</template>

<script>
import { connrequest } from '@/api/firstPage';
import { pagingMixin } from '@/mixins/index';
import elDragDialog from '@/directive/el-drag-dialog';
import { parseTime } from '@/utils/index';

export default {
  mixins: [pagingMixin()],
  directives: { elDragDialog },
  data() {
    return {
      info: null,

      isShow: false,

      loading: false,

      tableData: [],
    };
  },
  methods: {
    parseTime,
    async getTableData() {
      try {
        const { Data = [], Paging = {} } = await connrequest('GetRemoteCtrlHistory', {
          Paging: {
            QueryPageNo: this.paging.page,
            QueryPageLength: this.paging.size,
          },
          Filter: {
            DeviceUUID: this.info.DeviceUUID,
          },
        });

        this.tableData = Data;
        this.paging.total = parseFloat(Paging.TotalCount) || 0;
      } catch (error) {
        throw error;
      }
    },
    onOpen() {},
    onClose() {
      this.info = null
    },
    close() {
      this.isShow = false;
    },
    async open(data) {
      if (!data || !data.DeviceUUID || this.loading) return;

      this.loading = true;

      try {
        this.info = data

        await this.getTableData();

        this.isShow = true;
      } catch (error) {
        throw error;
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.color-danger,
.color-success {
  font-size: 20px;
}
.color-success {
  color: #67c23a;
}
.color-danger {
  color: #f56c6c;
}
.table-hover-content {
  margin: 0;
  white-space: pre-wrap;
  max-height: 50vh;
  overflow: auto;
}
</style>
